<template>
  <view
    class="businessList"
    v-for="(item, index) in business"
    :key="index"
    @click="item.status === '1' ? '' : addwelf(item.id)"
    :style="{ width: item.status === '1' ? '100%' : '' }"
  >
    <!-- TODO check size -->
    <uni-icons
      type="checkbox-filled"
      v-show="item.status !== '1' && welfareID.indexOf(item.id) !== -1"
      color="#2979ff"
      size="30"
    ></uni-icons>
    <uni-icons
      type="checkbox"
      v-show="item.status !== '1' && welfareID.indexOf(item.id) === -1"
      color="#2979ff"
      size="30"
    ></uni-icons>
    <view class="left_business">
      <view style="margin-bottom: 30rpx; font-weight: bold; align-items: flex-end">
        <text style="font-size: 32rpx">{{ item.type }}</text>
        <text>{{ item.status_text }}</text>
      </view>
      <view v-if="item.type !== '加注订单'">
        <text>充值金额</text>
        <text>{{ item.money }}元</text>
      </view>
      <view v-if="item.type === '加注订单'">
        <text>实付</text>
        <text>{{ item.money }}元</text>
      </view>
      <view v-if="item.type === '加注订单'">
        <text>加注量</text>
        <text>{{ item.count }}公斤</text>
      </view>
      <view>
        <text>备注</text>
        <text>{{ item.des }}</text>
      </view>
      <view>
        <text>交易时间</text>
        <text>{{ item.createtime }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue';

defineProps({
  active: {
    type: String,
    default: '',
  },
  business: {
    type: Array as PropType<Array<any>>,
    default: () => [],
  },
});

const welfareID = ref([]);

const emit = defineEmits(['activeWelf']);

function addwelf(num) {
  if (welfareID.value.indexOf(num) === -1) {
    welfareID.value.push(num);
  } else {
    welfareID.value.map((item, index) => {
      if (item === num) {
        // TODO check
        welfareID.value.splice(index);
      }
    });
  }
  emit('activeWelf', welfareID.value.join(','));
}
</script>

<style lang="less">
.businessList {
  width: 95%;
  margin: 0px 2.5% 2.5%;
  padding: 30rpx 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 5px;
  .left_business {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    view {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;
      text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      text:nth-of-type(2) {
        width: 70%;
        text-align: right;
      }
    }
  }
}
</style>
